<style scoped>
  .content {
    background: -webkit-linear-gradient(left, #6379F8, #91A5F8);
  }

  .header {
    display: flex;
    flex-direction: column;
  }

  .head-top {
    width: 100%;
    height: 16px;
    background: transparent;
  }

  .head {
    height: 51px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .head h1, .head h3, .head h4 {
    color: #FFFFFF;
  }

  .head-left{
    position: absolute;
    width:40px;
    height:100%;
    left:0;
    top:0;
    color: #7f7a8e;
    text-align: center;
  }
  .head-left h1{
    margin-top: 22px;
  }

  .head-middle {
    font-size: 16px;
    display: flex;
    flex-direction: column;
  }

  .head-middle h3 {
    text-align: center;
  }

  .head-middle > h4 {
    display: flex;
    width: auto;
    justify-content: center;

  }

  .head-middle > h4 h4 {
    background: #9BABF7;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
  }

  .head-right {
    position: absolute;
    right: 10px;
    top: 15px;
    height: 24px;
    width: 59px;
  }

  .head-right h1 {
    float: right;
    display: inline-block;
  }

  .history {
    padding: 10px 0 0 15px;
  }

  .history > h1 {
    color: rgba(255, 255, 255, 0.5);
  }

  /*.check{*/
  /*padding:4px 12px;*/

  /*}*/
  .check .check-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #e9e9e9;
    padding: 4px 12px
  }

  .check .check-top .left {
    display: flex;
    align-items: center;
  }

  .optimize {
    animation: myfirst 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
  }

  @keyframes myfirst {
    0% {
      transform: rotate(0deg)
    }
    100% {
      transform: rotate(90deg)
    }
  }

  .optimize2 {
    animation: myfirst2 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards
  }

  @keyframes myfirst2 {
    0% {
      transform: rotate(90deg)
    }
    100% {
      transform: rotate(0deg)
    }
  }

  .fold-enter-active, .fold-leave-active {
    transition: all 0.5s ease
  }

  .fold-enter {
    opacity: 0
  }

  .fold-leave {
    opacity: 0
  }

  .check .right {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .check .right h5 {
    background: #FE7A4A;
    color: #FFFFFF;
    padding: 6px 14px;
    border-radius: 6px;
    margin-right: 6px;
  }

  .check-bottom {
    display: flex;
    padding: 10px 0;
    margin: 0 12px;
    border-bottom: 1px dashed #e9e9e9;
  }

  .check-bottom > div {
    flex: 1;
  }

  .check-bottom > div > div {
    padding: 2px 0;
    display: flex;
    align-items: center;
  }

  .check-bottom > div > div b {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FF6179;
    display: block;
    margin-right: 4px;
  }

  .check-r > div:last-child {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  .check-r > div:last-child > div:first-child {
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .check-r > div:last-child > div {
    display: flex;
  }

  .check-r > div:last-child > div:last-child {
    flex-direction: column;

  }

  .line1 {
    height: 200px;
    overflow: hidden;
    background: #ffffff;
  }

  .echarts {
    height: 200px;
    width: 100%;
  }

  .speed {
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    flex-direction: row;
    padding: 0 12px 10px 12px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .speed > div {
    /*width: 50%;*/
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #7590FF;
    /*margin:0 10px;*/
    border-radius: 9px;
    margin-top:10px;
  }
  .speed > div h3{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .speed > div:first-child {
    /*margin-right: 10px;*/
  }

  .speed > div:last-child {
    /*margin-left: 10px;*/
  }

  .income-t {
    display: flex;
    flex-direction: row;
    padding: 6px 12px;
    background: #eaeff3;
  }

  .income-t h2 {
    color: #83BBFF;
  }

  .income-t > p {
    margin-left: 4px;
  }

  .income-b {
    /*height:200px;*/
  }

  .count-t {
    display: flex;
    flex-direction: row;
    padding: 6px 12px;
    background: #eaeff3;
  }

  .count-t h2 {
    display: flex;
    align-items: center;
  }

  .count-t p {
    display: flex;
    align-items: center;
    margin-left: 4px;
  }

  .count-b > ul {
    display: flex;

  }

  .count-b > ul:last-child {
    flex-direction: column;
  }

  .allul {
    display: flex;
    flex-direction: column;
  }

  .allul > li {
    display: flex;
    flex-direction: column;
  }

  .allul > li > ul {
    width: 100%;
    display: flex;
  }

  .allul > li > ul:first-child > li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
  }

  .allul > li > ul:first-child > li:first-child {
    flex: 3
  }

  .allul > li > ul:first-child > li {
    flex: 2
  }

  .second > ul:first-child {
    border-bottom: 1px solid #e9e9e9;
  }

  .third {
    display: flex;
    flex-direction: column;
  }

  .third > li {
    width: 100%;
  }

  .third > li > ul {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #e9e9e9;
    padding: 6px 0;
  }

  .third > li > ul > li {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .third > li > ul > li:first-child {
    flex: 3
  }

  .third > li > ul > li {
    flex: 2
  }

  .allul > li > ul > li > ul {
    display: flex;
  }

  .count-b > ul.first {
    border-bottom: 1px solid #e9e9e9;
  }

  .count-b > ul.first li {
    padding: 8px 0;
  }

  .count-b > ul.first li:first-child {
    flex: 3
  }

  .count-b > ul.first li {
    flex: 2
  }

  .count-b > ul > li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .count-b > ul.second > li {
    padding: 10px 0;
  }

  .count-b > ul.third > li {
    padding: 6px 0;
  }

  .count > ul > li:first {
    position: relative;
  }

  .count-b > ul > li b {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    left: 8px;
    top: 5px;
  }

  .third li ul li:first-child {
    position: relative;
  }

  .count-b > ul > li h1 {
    display: block;
    position: absolute;
    left: 12px;
    width: 1px;
  }

  .second > ul:first-child > li:first-child {
    position: relative;
  }

  .second > ul:first-child > li:first-child b {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    left: 8px;
    top: 10px;
  }

  @media screen and (max-width: 320px) {
    .count-b > ul > li h1 {
      top: -17px;
      height: 23px;
    }
    .speed > div h3{
      width: 130px;
    }
  }

  @media screen and (max-width: 375px) and (min-width: 321px) {
    .count-b > ul > li h1 {
      top: -20px;
      height: 25px;
    }
    .speed > div h3{
      width: 150px;
    }
  }

  @media screen and (min-width: 376px) {
    .count-b > ul > li h1 {
      top: -21px;
      height: 26px;
    }
    .speed > div h3{
      width: 170px;
    }
  }

  .count-b > ul > li:first-child b {
    border: 1px solid #546bff;
  }

  .count-b > ul > li:first-child h1 {
    background: #546bff;
  }

  .count-b > ul > li:nth-child(2) b {
    border: 1px solid #ff6543;
  }

  .count-b > ul > li:nth-child(2) h1 {
    background: #ff6543;
  }

  .count-b > ul > li:nth-child(3) b {
    border: 1px solid #77cb7d;
  }

  .count-b > ul > li:nth-child(3) h1 {
    background: #77cb7d;
  }

  .count-b > ul > li:nth-child(4) b {
    border: 1px solid #f74949;
  }

  .count-b > ul > li:nth-child(4) h1 {
    background: #f74949;
  }

  .count-b > ul > li:nth-child(5) b {
    border: 1px solid #ff9595;
  }

  .count-b > ul > li:nth-child(5) h1 {
    background: #ff9595;
  }

  .count-b > ul > li:nth-child(6) b {
    border: 1px solid #f8e71c;
  }

  .count-b > ul > li:nth-child(6) h1 {
    background: #f8e71c;
  }

  .count-b > ul > li:nth-child(7) b {
    border: 1px solid #7c69f4;
  }

  .count-b > ul > li:nth-child(7) h1 {
    background: #7c69f4;
  }

  .count-b > ul > li:nth-child(8) b {
    border: 1px solid #50e3c2;
  }

  .count-b > ul > li:nth-child(8) h1 {
    background: #50e3c2;
  }
  .count-b > ul > li:nth-child(9) b {
    border: 1px solid #546bff;
  }
  .count-b>ul>li:nth-child(9) h1{
    background: #546bff;
  }
  .first>li>h4{
    display: flex;
    flex-direction: row;
  }
</style>

<template>
  <div class="laboratory">
    <div class="content" style="padding-top: 66px;">
      <div class="header" style="z-index: 9999;position: fixed;top: 0;width: 100%;background: -webkit-linear-gradient(left, #6379F8, #91A5F8)">
        <div class="head-top"></div>
        <div class="head">
          <div class="head-left" @click="goBack"><h1 class="iconfont icon-xiangzuo1"></h1></div>
          <div class="head-middle">
            <h3>{{allData.para.name}}</h3>
            <h4><h4>{{allData.para.endDate}}</h4></h4>
          </div>
          <div class="head-right"></div>
        </div>
      </div>
      <div class="history">
        <h1>历史业绩展示</h1>
      </div>
      <div class="line">
        <chart v-if="line.tooltip" :options="line" width="100%"></chart>
      </div>
    </div>
    <v-networkerr v-if="!$store.state.networkState" v-on:reload="findData"></v-networkerr>
    <div v-else>
      <div class="check">
        <div class="check-top" @click='chooseOptimize'>
          <div class="left"><p>查看测试条件及风格</p></div>
          <div class="right">
            <h5 @click="chooseAgain">重新优化选择</h5>
            <h2 class="iconfont icon-xiangyou1 " :class="{optimize: show,optimize2:show2}" ></h2>
          </div>
        </div>
        <transition name="fold">
          <div v-if="show1">
            <div class="check-bottom">
              <div class="check-l">
                <div>
                  <b></b>
                  <p>股票池&nbsp;&nbsp;{{allData.para.stockPool | toChinese2}}</p>
                </div>
                <div>
                  <b v-if="toChinese3"></b>
                  <p v-if="toChinese3">优化方式&nbsp;&nbsp;{{allData.para.optMethod | toChinese3}}</p>
                  </li>
                </div>
              </div>
              <div class="check-r">
                <div>
                  <b></b>
                  <p>份数&nbsp;&nbsp;{{allData.para.quantity}}份</p>
                </div>
                <div>
                  <div>
                    <b></b>
                    <p>时间&nbsp;&nbsp;</p>
                  </div>
                  <div>
                    <p>{{allData.para.startDate}}-</p>
                    <p>{{allData.para.endDate}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="speed">
              <div v-for="style in allData.para.styles">
                <h3>{{style | toChinese}}</h3>
              </div>
            </div>
          </div>
        </transition>

      </div>
      <div class="income">
        <!--<div class="income-t">-->
        <!--<h2 class="iconfont icon-c20_show"></h2>-->
        <!--<p>风格收益</p>-->
        <!--</div>-->
        <!--<div class="income-b">-->
        <!--<chart :options="point" width="100%" @click="clickChart(this)">-->
        <!--</chart>-->
        <!--</div>-->
      </div>
      <div class="count">
        <div class="count-t">
          <h2>
            <svg class="icon"
                 aria-hidden="true">
              <use xlink:href="#icon-c20_show"></use>
            </svg>
          </h2>
          <p>统计值对比
            <small>(点击表格可查看逐年数据)</small>
          </p>
        </div>
        <div class="count-b">
          <ul class="first">
            <li>
              <h4>统计值对比</h4>
            </li>
            <li>
              <h4 @click="sortFunc('r')" >组合收益率
                <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="sortControl.r === 1">
                  <svg class="icon"
                       aria-hidden="true">
                    <use :xlink:href="triangleDown"></use>
                  </svg>
                </i>
                <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="!sortControl.r">
                  <svg class="icon"
                       aria-hidden="true">
                    <use :xlink:href="triangleUp"></use>
                  </svg>
                </i>
                <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.r === 2">
                  <svg class="icon"
                       aria-hidden="true">
                    <use :xlink:href="triangleNormal"></use>
                  </svg>
                </i>
              </h4>
            </li>
            <li>
              <h4 @click="sortFunc('sharp')" >夏普比率
                <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="sortControl.sharp === 1">
                  <svg class="icon"
                       aria-hidden="true">
                    <use :xlink:href="triangleDown"></use>
                  </svg>
                </i>
                <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="!sortControl.sharp">
                  <svg class="icon"
                       aria-hidden="true">
                    <use :xlink:href="triangleUp"></use>
                  </svg>
                </i>
                <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.sharp === 2">
                  <svg class="icon"
                       aria-hidden="true">
                    <use :xlink:href="triangleNormal"></use>
                  </svg>
                </i>
              </h4>
            </li>
            <li>
              <h4 @click="sortFunc('sigma')" >波动率
                <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="sortControl.sigma === 1">
                  <svg class="icon"
                       aria-hidden="true">
                    <use :xlink:href="triangleDown"></use>
                  </svg>
                </i>
                <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="!sortControl.sigma">
                  <svg class="icon"
                       aria-hidden="true">
                    <use :xlink:href="triangleUp"></use>
                  </svg>
                </i>
                <i style="font-size: 0.8em;margin-left: 2px" v-if="sortControl.sigma === 2">
                  <svg class="icon"
                       aria-hidden="true">
                    <use :xlink:href="triangleNormal"></use>
                  </svg>
                </i>
              </h4>
            </li>
          </ul>
          <ul v-for="(value,key,index) in allData" class="allul" v-if="key === 'table'">
            <li class="second" v-for="($value,$key,$index) in value" :key="$index">
              <ul @click="showThird($index)">
                <li>
                  <b></b>
                  <p>{{$key | toChinese}}</p>
                </li>
                <li><p>{{$value.r | percent}}%</p></li>
                <li><p>{{$value.sharp | toFixed}}</p></li>
                <li><p>{{$value.sigma | percent}}%</p></li>
              </ul>
              <ul class="third" style="display:none;">
                <li v-for="tableExpand in $value.expand">
                  <ul>
                    <li><h1></h1><b></b>
                      <p>{{tableExpand.year}}</p></li>
                    <li><h1></h1>
                      <p>{{tableExpand.r | percent}}%</p></li>
                    <li><h1></h1>
                      <p>{{tableExpand.sharp | toFixed}}</p></li>
                    <li><h1></h1>
                      <p>{{tableExpand.sigma | percent}}%</p></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ECharts from 'vue-echarts/components/ECharts.vue'
  import '../../node_modules/echarts/lib/echarts'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/component/graphic'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import 'echarts/lib/chart/scatter'
  import laboratory from '../assets/js/laboratory.js'
  import host from '../config.js'
  import { sort, sortControl, sortByObj } from '../plugins/sort'
  import ecConfig from 'vue-echarts/config'

  export default {
    components: {
      chart: ECharts
    },
    data () {
      return {
        line: {},
        tooltip: {},
        show: false,
        show1: false,
        show2: false,
        color: ['#546bff', '#ff6543', '#77cb7d', '#f74949', '#ff9595', '#f8e71c', '#7c69f4', '#50e3c2', '#46eeaa'],
        thirdShow: false,
        point: null,
        triangleUp: '#icon-paixu',
        triangleDown: '#icon-paixu1',
        triangleNormal: '#icon-paixu3',
        allData: {
          "benchmarkN": [],
          "date": [],
          "para": {
              "startDate": "",
              "styles": [],
              "country": "",
              "name": "",
              "endDate": "",
              "benchmark": "",
              "id": "",
              "progress": 0,
              "optMethod": "",
              "quantity": 0,
              "stockPool": ""
          },
          "table": {
              "portfolio": {
                  "r": 0,
                  "expand": [
                      {
                          "r": 0,
                          "year": "",
                          "sharp": 0,
                          "sigma": 0
                      }
                  ],
                  "sharp": 0,
                  "sigma": 0
              },
              "Capital Efficiency": {
                  "r": 0,
                  "expand": [
                      {
                          "r": 0,
                          "year": "",
                          "sharp": 0,
                          "sigma": 0
                      }
                  ],
                  "sharp": 0,
                  "sigma": 0
              }
          },
          "portfolioN": []
      },
        benchmarkN: [],
        portfolioN: [],
        date: [],
        sortControl: {
          r: 0,
          sharp: 0,
          sigma: 0
        },
        extendData: null,
        // 优化方式
        tabler: {},
        getId: null,
        chineseData: {},
        toChinese3: false
      }
    },
    activated () {
      this.findData()
    },
    created () {
      this.findData()
    },
    methods: {
      findData () {
        this.getId = this.$route.query.id
        this.$axios({
          method: 'get',
          headers: {
            'Authorization': window.localStorage.getItem('token')
          },
          url: host.host + '/api/v1/lab/para'
        }).then(function (data) {
          if (data.data.code === 200) {
            window.localStorage.setItem('laboratory', JSON.stringify(data.data.data))

          }
        })
        this.$http.get('/lab/detail?id=' + this.getId).then((data) => {
          this.extendData = JSON.parse(window.localStorage.getItem('laboratory'))
          let getData = this.extendData
          this.allData = data.data.data
          let echartsData = this.allData.para.benchmark
          let country = this.allData.para.country
          for (var exData in this.allData) {
            if (exData === 'table') {
              for (var i in this.allData[exData])
                this.tabler[i] = this.allData[exData][i]
                this.allData[exData][i].thirdShow = false
            }
          }



          var arr = [], arr2 = []
          for (var i in this.tabler) {
            arr.push(parseFloat(this.tabler[i].r).toFixed(2))
            arr2.push(this.toChinese(i))
          }
          this.date = []
          this.benchmarkN = []
          this.portfolioN = []
          for (let i = 0, len = this.allData.benchmarkN.length; i < len; i++) {
            this.benchmarkN.push(parseFloat(this.allData.benchmarkN[i]).toFixed(2))
            this.portfolioN.push(parseFloat(this.allData.portfolioN[i]).toFixed(2))
            this.date.push(this.allData.date[i])
          }
          let chineseToEng = JSON.parse(window.localStorage.getItem('laboratory')).stockPool[country].benchmark

          for (var j in chineseToEng){
            if(echartsData === j) {
              this.chineseData.data = chineseToEng[j]
            }
          }

          this.toChinese3 = false
          let extendData2 = JSON.parse(window.localStorage.getItem('laboratory'))
          for (let exData2 in extendData2.optimizeMethod) {
            if(exData2 == this.allData.para.optMethod) {
              this.toChinese3 = true
            }
          }

          this.line = {
            tooltip: {
              show: true,
              trigger: 'axis',
              backgroundColor: 'rgba(255, 255 ,255, 0.8)',
              textStyle: {
                color: '#666'
              },
              extraCssText: {
                extraCssText: 'box-shadow: 0 1px 4px rgba(0, 0, 0, 0.19)'
              },
              axisPointer: {}
            },
            legend: {},
            grid: {
              left: '8%',
              top: '4%',
              right: '3%',
              bottom: '3%'
            },
            xAxis: [
              {
                splitLine: {
                  show: false
                },
                boundaryGap: false,
                axisLabel: {
                  show: false
                },
                axisPointer: {
                  lineStyle: {
                    color: 'rgba(255,255,255,0.35)'
                  }
                },
                axisTick: false,
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: '#e9e9e9',
                    opacity: 0.8,
                    width: 2
                  }
                },
                data: this.date
              }
            ],
            yAxis: [
              {
                type: 'value',
                splitNumber: 3,
                splitLine: {
                  show: true,
                  lineStyle:{
                    type: 'dashed',
                    color: '#e9e9e9',
                    opacity: 0.5
                  }
                },
                scale: true,
                boundaryGap: false,
                axisLabel: {
                  show: true
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: '#e9e9e9',
                    opacity: 0.8
                  }
                },
                axisTick: false
              }
            ],
            series: [
              {
                smooth:true,
                name: '本组合净值',
                type: 'line',
                areaStyle: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: '#ffffff'
                  }
                },
                data: this.portfolioN
              },
              {
                smooth:true,
                name: this.chineseData.data,
                type: 'line',
                areaStyle: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: '#F9C859'
                  }
                },
                data: this.benchmarkN
              }
            ]
          }


        }).catch((err) => {
          if (err.toString().indexOf('timeout') > -1) {
            this.$store.state.networkState = false
          }
        })
      },
      goBack () {
        this.$router.go(-1)
      },
      chooseOptimize () {
        this.show1 = !this.show1
        if (!this.show) {
          this.show = !this.show
        } else {
          this.show2 = !this.show2
        }
      },
      sortFunc (value) {
        this.sortControl = sortControl(this.sortControl, value)
        this.$nextTick(() => {
          this.allData.table = sortByObj(this.allData.table, value, this.sortControl[value] === 1 ? 'sort' : 'reverse')
      })
      },
      showThird ($index) {
        var ul = document.getElementsByClassName('third')
        for (let i = 0; i < ul.length; i++) {
          if (i !== $index) {
            ul[i].style.display = 'none'
          }
        }
        if (ul[$index].style.display === 'none') {
          ul[$index].style.display = 'block'
        } else {
          ul[$index].style.display = 'none'
        }
      },
      toChinese (data) {
        let getData = ''
        if (data === 'portfolio') {
          return '组合'
        }
        let extendData = JSON.parse(window.localStorage.getItem('laboratory'))
        // for (var exData in extendData.style) {
        //   // for (var i in extendData[exData]) {
        //   //   if (data === i) {
        //   //     getData = extendData[exData][i]
        //   //   }
        //   // }
        //
        // }
        for(var i = 0;i<extendData.style.length;i++) {
          if(data == extendData.style[i].code){
            getData = extendData.style[i].name
          }
        }
        return getData
      },
      chooseAgain () {
        this.$router.push('../laboratory/new')
      },
      clickChart (_this) {
        console.log(_this)
      }
    },
    computed: {},
    beforeRouteLeave: (to, from, next) => {
      if (to.query.lab_name) {
        next('/laboratory')
        return
      }
      next()
    },
    filters: {
      toChinese (data) {
        let getData = ''
        if (data === 'portfolio') {
          return '组合'
        }
        let extendData = JSON.parse(window.localStorage.getItem('laboratory'))
        // for (var exData in extendData) {
        //   for (var i in extendData[exData]) {
        //     if (data === i) {
        //       getData = extendData[exData][i]
        //     }
        //   }
        // }
        for(var i = 0;i<extendData.style.length;i++) {
          if(data == extendData.style[i].code){
            getData = extendData.style[i].name
          }
        }
        return getData
      },
      toChinese2 (data) {
        let getData = ''
        let extendData = JSON.parse(window.localStorage.getItem('laboratory'))
        for (var exData in extendData.stockPool) {
          for (var i in extendData.stockPool[exData].choice) {
            if(data == i) {
              getData = extendData.stockPool[exData].choice[i].name
            }
          }
        }
        return getData
      },
      toChinese3 (data) {
        let getData = ''
        let extendData = JSON.parse(window.localStorage.getItem('laboratory'))
        for (var exData in extendData.optimizeMethod) {
          if(exData == data) {
            getData = extendData.optimizeMethod[exData].name
          }
        }
        return getData
      },
      percent (data) {
        if (data) {
          return (parseFloat(data) * 100).toFixed(2)
        } else {
          return 0
        }
      },
      toFixed (data) {
        if (data) {
          return (parseFloat(data)).toFixed(2)
        } else {
          return 0
        }
      }
    }
  }
</script>
